<template>
  <footer>
    <div class="foter_item">
      <RouterLink class="nr1" v-for="item in items" :key="item.id" :to="item.url">
        <div class="nr">
          <img :src="item.flag ? item.hov_img : item.img" alt="" />
        </div>
      </RouterLink>
    </div>
  </footer>
</template>
<script setup>
import { RouterLink, useRoute } from 'vue-router'
import zhinengImg from '../assets/images/anfang.png'
import zhinengActiveImg from '../assets/images/安防管理.png'
import employment from '../assets/images/设备运维1.png'
import employmentActiveImg from '../assets/images/设备运维.png'
import security from '../assets/images/智能检测1.png'
import securityActiveImg from '../assets/images/智能检测.png'
import equipment from '../assets/images/就业态势1.png'
import equipmentActiveImg from '../assets/images/就业态势.png'
import { onMounted, ref } from 'vue'
const items = ref([
  {
    id: 1,
    img: zhinengImg,
    hov_img: zhinengActiveImg,
    flag: false,
    url: '/home'
  },
  {
    id: 2,
    img: employment,
    hov_img: employmentActiveImg,
    flag: false,
    url: '/work'
  },
  {
    id: 3,
    img: security,
    hov_img: securityActiveImg,
    flag: false,
    url: '/protect'
  },
  {
    id: 4,
    img: equipment,
    hov_img: equipmentActiveImg,
    flag: false,
    url: '/equipment'
  }
])
onMounted(() => {
  const { path } = useRoute()
  console.log(path)
  let obj = items.value.find((item) => item.url === path)
  obj.flag = true
})
</script>


<style lang='scss' scoped>
footer {
  position: absolute;
  left: 33%;
  bottom: 0px;
  background: url('../assets/images/nav.png') no-repeat;
  background-size: 100% 100%;
  width: 600px;
  height: 90px;
}
.foter_item {
  display: flex;
  margin-left: 150px;
}
.nr1 {
  position: relative;
  width: 50px;
  height: 90px;
  font-size: 12px;
  margin: 0px 6px;
}
.nr {
  color: #fff;
  position: absolute;
  left: 50%;
  bottom: 10px;
  bottom: '10px';
}
.nr img {
  width: 60px;
  height: 60px;
}
.on {
  color: red;
}
</style>
